<template>
    <div>
        <Button type="primary" @click="add">新建</Button>
        <Table stripe border :columns="columns" :data="rows"></Table>
        <modal width="800" :title="modal.title" v-model="modal.show" @on-ok="save">
            <Form :model="form" :rules="rule">
                <FormItem label="字典名">
                    <Input type="text" v-model="form.key" placeholder="字典名" style="width: 620px;">
                        <Icon type="logo-hackernews" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Input v-model="form.value" type="textarea" placeholder="请输入字典值，必须符合JSON格式规范。" :rows="12"/>
                </FormItem>

            </Form>
        </modal>
        <Modal v-model="showDelete" width="300" :mask-closable="false" :styles="{top: '240px'}">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <h3>确认删除？</h3>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long  @click="submitRemove()">删除</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import util from '../../libs/util';

    export default {
        data() {
            return {
                modal: {
                    show: false,
                    title: '添加字典',
                    isAdd: true,
                },
                columns: [
                    {title: '字典名称', key: 'key'},
                    {
                        title: '操作', key: 'key', render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        shape: 'circle'
                                    },
                                    style: {
                                        marginRight: '20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        shape: 'circle'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                ],
                rows: [],
                form: {
                    _id: '',
                    key: '',
                    value: ''
                },
                rule: {
                    key: [
                        {message: '字典名称', trigger: 'blur'}
                    ],
                },
                showDelete: false,
                deleteIndex: '',

            }
        },
        created() {
            this.$vnode.fnContext.menuText = '系统管理';
            this.$vnode.fnContext.optionText = '字典管理';
            this.getList();
        },
        methods: {
            add() {
                delete this.form._id;
                this.form.key = '';
                this.form.value = '';
                this.modal.isAdd = true;
                this.modal.show = true;
                this.modal.title = "添加字典";
            },
            edit(index) {
                this.modal.isAdd = false;
                this.modal.show = true;
                this.modal.title = "修改字典";
                this.form = Object.assign({}, this.rows[index]);
            },
            remove(index) {
                this.deleteIndex = index;
                this.showDelete = true;
            },
            submitRemove() {
                util.getAdminJsonData('/admin/dictionary/remove', {_id: this.rows[this.deleteIndex]._id}, this, (data) => {
                    this.getList();
                });
            },
            getList() {
                util.getAdminJsonData('/admin/dictionary/list', {}, this, (data) => {
                    this.rows = data;
                });
            },
            save() {
                let url = this.modal.isAdd ? '/admin/dictionary/add' : '/admin/dictionary/edit';
                util.postAdminJsonData(url, this.form, this, (data) => {
                    this.getList();
                });

            }
        }
    }
</script>
